<template>
  <div class="container">
    <!-- <template v-for="n in 100" :key="n">
      <heavy-comp v-if="defer(n)"></heavy-comp>
    </template> -->
    <!-- 两种都可以 -->
    <template v-for="n in 100" :key="n">
      <template v-if="n < 10">
        <heavy-comp v-if="defer(10)"></heavy-comp>
      </template>
      <template v-if="n < 20">
        <heavy-comp v-if="defer(20)"></heavy-comp>
      </template>
      <template v-if="n < 30">
        <heavy-comp v-if="defer(30)"></heavy-comp>
      </template>
      <template v-if="n < 40">
        <heavy-comp v-if="defer(40)"></heavy-comp>
      </template>
      <template v-if="n < 50">
        <heavy-comp v-if="defer(50)"></heavy-comp>
      </template>
      <template v-if="n < 60">
        <heavy-comp v-if="defer(60)"></heavy-comp>
      </template>
      <template v-if="n < 70">
        <heavy-comp v-if="defer(70)"></heavy-comp>
      </template>
      <template v-if="n < 80">
        <heavy-comp v-if="defer(80)"></heavy-comp>
      </template>
      <template v-if="n < 90">
        <heavy-comp v-if="defer(90)"></heavy-comp>
      </template>
      <template v-if="n < 100">
        <heavy-comp v-if="defer(100)"></heavy-comp>
      </template>
    </template>
  </div>
</template>

<script setup>
import HeavyComp from "./HeavyComp.vue";
import { useDefer } from "./useDefer";
const defer = useDefer();
</script>

<style lang="scss" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
}
</style>
